<!DOCTYPE html><head>
	<meta charset="utf-8">
	<title>FEATURES - List Page Style - Fashionic Ajax Respondsive HTML Template</title>
	
	<!-- CSS
	  ================================================== -->
	<link rel="stylesheet" media="all" type="text/css" href="styles/mediaelementplayer.min.css" />
	<link rel="stylesheet" media="all" type="text/css" href="styles/supersized.css" />
	<link rel="stylesheet" media="all" type="text/css" href="js/themes/classic/galleria.classic.css" />
	<link rel="stylesheet" media="all" type="text/css" href="style.css" />
	<link rel="stylesheet" media="all" type="text/css" href="styles/light.css" /><!--Color scheme include: light.css and dark.css-->
	<link rel="stylesheet" media="all" type="text/css" href="styles/respondsive.css" />
	<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="styles/retina.css" />

	 <!--Mobile Specific Metas
	  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<!-- JS
 	================================================== -->
	<script type='text/javascript' src='js/jquery.js'></script>
	<script type='text/javascript' src='js/jquery.easing.min.js'></script>
	<script type='text/javascript' src='js/jquery.infinitescroll.min.js'></script>
	<script type='text/javascript' src='js/mediaelement-and-player.min.js'></script>
	<script type='text/javascript' src='js/jquery.hoverIntent.js'></script>
	<script type='text/javascript' src='js/supersized.3.2.7.min.js'></script>
	<script type='text/javascript' src='js/supersized.shutter.min.js'></script>
	<script type='text/javascript' src='js/galleria-1.2.8.min.js'></script>
	<script type='text/javascript' src='js/themes/classic/galleria.classic.js'></script>
	<script type='text/javascript' src='js/jquery.hoverdir.js'></script>
	<script type='text/javascript' src='js/color.js'></script>
	<script type='text/javascript' src='js/jquery.isotope.js'></script>
	<script type='text/javascript' src='js/main.js'></script>
	
	
	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="img/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-114x114.png">
	
	<!-- IE hack
	================================================== -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!--[if lte IE 8 ]>
	<script type="text/javascript" src="js/ie.js"></script>
	<link rel="stylesheet" media="all" type="text/css" href="styles/ie.css" />
	<![endif]-->
	
	<!--[if lte IE 6]>
	<div style="width: 100%;" class="messagebox_orange">Your browser is obsolete and does not support this webpage. Please use newer version of your browser or visit <a href="http://www.ie6countdown.com/" target="_new">Internet Explorer 6 countdown page</a>  for more information. </div>
	<![endif]-->	
	
	<!--/////////////
	//Google Fonts//
	///////////////-->
	<link href='../../../fonts.googleapis.com/css_362961CB' rel='stylesheet' type='text/css'>
	<link href='../../../fonts.googleapis.com/css_D6542681' rel='stylesheet' type='text/css'>
	<link href='../../../fonts.googleapis.com/css_96849461' rel='stylesheet' type='text/css'>
	
</head>

<body class="single">
<div id="wrap">

<!--/////////////////////////////////////////////
//////////                         /////////////
//////////    Left Sidebar Area   //////////////
/////////                         /////////////
////////////////////////////////////////////-->	
	<div id="siderbar" class="sidebar_forlist">
	<div class="sidebar_wrapmost">
	
	<!--
	////////////////
	     Logo
	///////////////
	-->	
		<p id="logo"><a href="index.html" title="Fashionic Template"><img src="img/logo.png" alt="Fashionic Template" width="250" height="90"></a></p>
		<p id="logo_retina"><a href="index.html" title="Fashionic Template"><img src="img/logo_retina.png" alt="Fashionic Template" width="250" height="90"></a></p><!--Logo For High Resolution -->
				
			
	<!--
	//////
	 Menu
	//////
	-->	
		<div class="menu_wrap">
			<div id="navi" class="clearfix">
			<ul class="menu">
				<li class="menu-item"><a href="index.html">HOME</a></li>
				<li class="menu-item">
					<a href="index.html">PORTFOLIO</a>
					<!--Submenu for Portfolio item-->
					<ul class="sub-menu">
						<li class="menu-item"><a href="portfolio_list_23.html">Portfolio 2:3</a></li>
						<li class="menu-item"><a href="portfolio_list_32.html">Portfolio 3:2</a></li>
						<li class="menu-item"><a href="portfolio_list_11.html">Portfolio 1:1</a></li>
						<li class="menu-item"><a href="portfolio_list_tumblr.html">Tumblr Style</a></li>
					</ul>
					<!--End Submenu for Portfolio item-->
				</li>
				<li class="menu-item">
					<a href="magazine.html">MAGAZINE</a>
					<ul class="sub-menu">
						<li class="menu-item"><a href="magazine_with_slider.html">Magazine with Slider</a></li>
						<li class="menu-item"><a href="magazine_with_border.html">List with Border</a></li>
					</ul>
				</li>
				<li class="menu-item current-menu-parent">
					<a href="javascript:;">FEATURES</a>
					<!--Submenu for Features item-->
					<ul class="sub-menu">					
						<li class="menu-item current-menu-item"><a href="feature_list_style.html">List Page Style</a></li>
						<li class="menu-item"><a href="feature_slider.html">Slider</a></li>
						<li class="menu-item"><a href="feature_pagination.html">Pagination</a></li>
					</ul>
					<!--End Submenu for Features item-->
				</li>
				<li class="menu-item"><a href="javascript:;">PAGE EXAMPLES</a>
					<ul class="sub-menu">
						<li class="menu-item"><a href="about.html">About</a></li>
						<li class="menu-item"><a href="contact.html">Contact</a></li>
					</ul>
				</li>
			</ul>
			</div><!--End navi-->
		</div><!--End menu_wrap-->
	</div><!--End sidebar_wrapmost-->
	
	<div id="siderbar_bottom">
	
	<!--
	//////////////
	Search box
	/////////////
	-->	
		<div id="search" class="searchcss social_active">
			<form id="search_form" name="" method="get" class="search-form_header" action="#">
			<span class="searchicon"></span><input type="text" onBlur="if (this.value == '') {this.value = 'Search';}" onFocus="if (this.value == 'Search') {this.value = '';}" id="s" name="s" value="Search" class="textboxsearch"><input type="submit" value="" class="submitsearch" name="submitsearch">
</form>
		</div><!--END search-->
		
	<!--
	///////////
	Social icons 
	(it is not displayed in mobile device)
	///////////
	-->	
		
		<div id="social_icon">
			<a id="social_facebook" class="social_active" href="../../../www.facebook.com/uiueux/index.htm" title="Visit Facebook page"><span></span></a><!--Facebook-->
			<a id="social_twitter" class="social_active" href="../../../www.twitter.com/uiueux/index.htm" title="Visit Twitter page"><span></span></a><!--Twitter-->
			<a id="social_google_plus" class="social_active" href="#" title="Visit Google Plus page"><span></span></a><!--Google plus-->
			<a id="social_pinterest" class="social_active" href="#" title="Visit Pinterest page"><span></span></a><!--Pinterest-->
			<a id="social_dribbble" class="social_active" href="#" title="Visit Dribbble page"><span></span></a><!--Dribbble-->	
			<!--<a id="social_trumblr" class="social_active" href="#" title="Visit Tumblr page"><span></span></a> Trumblr-->
			<!--<a id="social_youtube" class="social_active" href="#" title="Visit Youtube page"><span></span></a> Youtube-->
			<!--<a id="social_flickr" class="social_active" href="#" title="Visit Flickr page"><span></span></a> Flickr-->
			<!--<a id="social_vimeo" class="social_active" href="#" title="Visit Vimeo page"><span></span></a> Vimeo-->
			<!--<a id="social_linkedin" class="social_active" href="#" title="Visit LinkedIn page"><span></span></a> Linkedin-->
			<!--<a id="social_forst" class="social_active" href="#" title="Visit Forst page"><span></span></a> Forst-->
			<!--<a id="social_github" class="social_active" href="#" title="Visit Github page"><span></span></a> Github-->
			<!--<a id="social_rss" class="social_active" href="#" title="Rss"><span></span></a> Rss-->			
		</div><!--END social_icon-->
		
	
	<!--
	///////////
	copyright 
	(it is not displayed in mobile device)
	///////////
	-->			
		<div id="copyright">Copyright @ uiueux.com</div>
	</div><!--END siderbar_bottom-->	
	</div><!--End sidebar-->



	<!---/////////////////////////////////////////////
	//////////                         /////////////
	//////////    Main Content Area   //////////////
	/////////                         /////////////
	////////////////////////////////////////////-->	
	<div id="content" class="content_wrap">
		<div id="single-wrap">
			<h1>List Page Style</h1>
			<div class="entry clearfix">
				<p>There are 2 layouts for list page:</p>
				<p><div class="list_style list_style_dot"> Portfolio </div> 
				<div class="list_style list_style_dot"> Magazine </div></p>
				
				<p>
				<img title="screensho4" src="../../wp/fashionic/files/2012/09/screensho4.jpg" alt="Portfolio List" width="300" height="161"  /><br />
				Portfolio List
				</p>
				
				<p>
				<img title="screensho4" src="../../wp/fashionic/files/2012/09/screenshot4.jpg" alt="Magazine List" width="300" height="161"  /><br />
				Magazine List
				</p>
				
				<p>
				You can customize the space between item blocks for pages respectively:<br /><br />
				<img title="screensho4" src="../../wp/fashionic/files/2012/09/screenshot21.jpg" alt="customize the space" width="300" height="161"  /><br />
				The space between blocks: 20px
				
				</p>
				
				<p>The width for a opened post could be customized: (1-10 columns):<br /><br />
				<img title="screensho4" src="../../wp/fashionic/files/2012/09/Content-Page-Width-Columns.jpg" alt="width for a opened post" /><br />
				The space between blocks: 20px, you could set the options for <a href="index.html" title="portfolio list">list page</a>:
				<pre>&lt;script&gt;<br>var blockWidth = '120'; // Width of block<br>var blockMargin = '10';  // Space between blocks<br>var blockColumn = '4';  // Columns of expanded block <br>var smallBlockBg = '#ffffff'; // Background color of block<br>var bigBlockBg = '#f3f3f3'; // Background color of expanded block<br>&lt;/script&gt;</pre>
				
				</p>
				
			</div><!--End entry-->
		</div><!--End single-wrap-->
	
	<!--
	////////////////
	//Right Sidebar
	/////////////
	-->
	
	<div class="sidebar_right">
		
	 	<ul class="sidebar_right_widget">
	 		<li class="widget-container widget_recent_comments">
				<h3 class="widget-title">COMMENTS</h3>
				<ul id="recentcomments">
					<li class="recentcomments"><span class="avatars"><img alt='' src='../../../1.gravatar.com/avatar/fd11e9497a6246b7df254f973643bb78_C6652025' class='avatar avatar-28 photo' height='28' width='28' /></span> <a href="#">Risus nonursus porta sociis diam amet integer mattis...</a>		
					</li>
					<li class="recentcomments"><span class="avatars"><img alt='' src='../../../0.gravatar.com/avatar/e12e3a3324f392ff856de7985ab4848d_0F6E1E83' class='avatar avatar-28 photo' height='28' width='28' /></span> <a href="#">Massa cursus nisi scelerisque. Odio adipiscing.</a></li>
					<li class="recentcomments"><span class="avatars"><img alt='' src='../../../1.gravatar.com/avatar/fd11e9497a6246b7df254f973643bb78_C6652025' class='avatar avatar-28 photo' height='28' width='28' /></span> <a href="#">Placerat enim risus! Pulvinar nec arcu magnis sociis qu...</a></li>
					<li class="recentcomments"><span class="avatars"><img alt='' src='../../../1.gravatar.com/avatar/fd11e9497a6246b7df254f973643bb78_C6652025' class='avatar avatar-28 photo' height='28' width='28' /></span> <a href="#">Diam, et a augue nunc mauris cras integer amet, turpis...</a></li>
					<li class="recentcomments"><span class="avatars"><img alt='' src='../../../1.gravatar.com/avatar/fd11e9497a6246b7df254f973643bb78_C6652025' class='avatar avatar-28 photo' height='28' width='28' /></span> <a href="#">Porttitor pellentesque turpis in etiam porttitor cras</a></li>
					<div class="clearfix"></div>
					</ul>
				</li>
				<li class="widget-container widget_text">
					<h3 class="widget-title">TEXT</h3>
					<div class="textwidget">Dignissim risus tincidunt, dictumst ultrices, aliquet nunc elementum adipiscing pulvinar in diam sit pellentesque integer adipiscing</div>
				</li>
				<li class="widget-container widget_archive">
					<h3 class="widget-title">ARCHIVES</h3>
					<ul>
						<li><a href='#' title='November 2012'>November 2012</a></li>
						<li><a href='#' title='October 2012'>October 2012</a></li>
						<li><a href='#' title='September 2012'>September 2012</a></li>
						<li><a href='#' title='August 2012'>August 2012</a></li>
					</ul>
				</li>
			</ul><!--End sidebar_right_widget-->
	</div><!--End sidebar_right-->
	</div><!--END content -->
	
		<!--//////////////////////////////////
		//// Social icons for mobile devices //
		//////////////////////////////-/////-->
		
		<div id="social_icon" class="social_icon_mobile">
			<a id="social_facebook" class="social_active" href="../../../www.facebook.com/uiueux/index.htm" title="Visit Facebook page"><span></span></a><!--Facebook-->
			<a id="social_twitter" class="social_active" href="../../../www.twitter.com/uiueux/index.htm" title="Visit Twitter page"><span></span></a><!--Twitter-->
			<a id="social_google_plus" class="social_active" href="#" title="Visit Google Plus page"><span></span></a><!--Google plus-->
			<a id="social_pinterest" class="social_active" href="#" title="Visit Pinterest page"><span></span></a><!--Pinterest-->
			<a id="social_dribbble" class="social_active" href="#" title="Visit Dribbble page"><span></span></a><!--Dribbble-->	
			<!--<a id="social_trumblr" class="social_active" href="#" title="Visit Tumblr page"><span></span></a> Trumblr-->
			<!--<a id="social_youtube" class="social_active" href="#" title="Visit Youtube page"><span></span></a> Youtube-->
			<!--<a id="social_flickr" class="social_active" href="#" title="Visit Flickr page"><span></span></a> Flickr-->
			<!--<a id="social_vimeo" class="social_active" href="#" title="Visit Vimeo page"><span></span></a> Vimeo-->
			<!--<a id="social_linkedin" class="social_active" href="#" title="Visit LinkedIn page"><span></span></a> Linkedin-->
			<!--<a id="social_forst" class="social_active" href="#" title="Visit Forst page"><span></span></a> Forst-->
			<!--<a id="social_github" class="social_active" href="#" title="Visit Github page"><span></span></a> Github-->
			<!--<a id="social_rss" class="social_active" href="#" title="Rss"><span></span></a> Rss-->	
		</div><!--END social-->
		
		<!--//////////////////////////////////////
		//// Copyright info. for mobile devices //
		//////////////////////////////-/////-->
		<div id="copyright_mobile" style="">Copyright @ uiueux.com</div>
</div>
<!--Back Top button-->
<div id="top"></div>
</body>
</html>